<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理 - 线框图原型</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f6f7fb;
      font-family: Arial, sans-serif;
    }
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 220px;
      height: 100vh;
      background: #232946;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 24px 0 0 0;
      box-sizing: border-box;
    }
    .sidebar .logo {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 32px;
      letter-spacing: 2px;
    }
    .sidebar .menu {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 0 0 24px;
    }
    .sidebar .menu .menu-item {
      padding: 10px 0;
      border-radius: 6px 0 0 6px;
      cursor: pointer;
      color: #bfc8e2;
      font-size: 1rem;
    }
    .sidebar .menu .menu-item.active {
      background: #e7eaf6;
      color: #232946;
      font-weight: bold;
    }
    .main {
      margin-left: 220px;
      min-height: 100vh;
      background: #f6f7fb;
    }
    .header {
      background: linear-gradient(90deg, #6a9cfb 0%, #a084ee 100%);
      color: #fff;
      border-radius: 18px;
      padding: 32px 32px 24px 32px;
      margin: 32px 32px 24px 32px;
      font-size: 2rem;
      font-weight: bold;
      position: relative;
    }
    .header-desc {
      font-size: 1.1rem;
      font-weight: normal;
      margin-top: 12px;
      color: #e0e0e0;
    }
    .action-bar {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-bottom: 16px;
    }
    .btn {
      background: #fff;
      color: #6a9cfb;
      border: 1.5px solid #a084ee;
      border-radius: 8px;
      padding: 8px 18px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .btn-primary {
      background: #6a9cfb;
      color: #fff;
      border: none;
    }
    .filter-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      padding: 24px;
      margin: 0 32px 24px 32px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .filter-input, .filter-select {
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 1rem;
      background: #f6f7fb;
    }
    .table-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      padding: 24px;
      margin: 0 32px 32px 32px;
    }
    .table-title {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 12px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
    }
    th, td {
      border: 1px solid #e0e0e0;
      padding: 10px 8px;
      text-align: left;
      font-size: 1rem;
    }
    th {
      background: #f3f0fa;
      color: #6a9cfb;
      font-weight: bold;
    }
    tr:nth-child(even) {
      background: #f6f7fb;
    }
    .table-actions {
      display: flex;
      gap: 8px;
    }
    .table-btn {
      background: #fff;
      color: #6a9cfb;
      border: 1px solid #a084ee;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 0.95rem;
      cursor: pointer;
    }
    .table-btn.primary {
      background: #6a9cfb;
      color: #fff;
      border: none;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">SG3L</div>
    <div class="menu">
      <div class="menu-item">仪表盘</div>
      <div class="menu-item">分析页</div>
      <div class="menu-item">监控页</div>
      <div class="menu-item">模板中心</div>
      <div class="menu-item">组件中心</div>
      <div class="menu-item active">用户管理</div>
      <div class="menu-item">角色管理</div>
      <div class="menu-item">日志中心</div>
      <div class="menu-item">权限管理</div>
      <div class="menu-item">系统设置</div>
    </div>
  </div>
  <div class="main">
    <div class="header">
      用户管理
      <div class="header-desc">管理系统用户信息，支持新增、编辑、删除和批量操作</div>
      <div class="action-bar">
        <button class="btn">刷新</button>
        <button class="btn">批量删除</button>
        <button class="btn btn-primary">+ 新增用户</button>
      </div>
    </div>
    <div class="filter-section">
      <input class="filter-input" type="text" placeholder="用户名" />
      <input class="filter-input" type="text" placeholder="邮箱" />
      <select class="filter-select">
        <option>用户状态</option>
      </select>
      <button class="btn btn-primary">搜索</button>
      <button class="btn">重置</button>
      <div style="margin-left:auto; color:#888; font-size:0.98rem;">共 32 条记录</div>
    </div>
    <div class="table-section">
      <div class="table-title">用户列表</div>
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" /></th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" /></td>
            <td>superadmin</td>
            <td>superadmin@system.com</td>
            <td>超级管理员</td>
            <td>启用</td>
            <td class="table-actions">
              <button class="table-btn">编辑</button>
              <button class="table-btn primary">重置密码</button>
              <button class="table-btn">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>user1</td>
            <td>user1@system.com</td>
            <td>普通用户</td>
            <td>禁用</td>
            <td class="table-actions">
              <button class="table-btn">编辑</button>
              <button class="table-btn primary">重置密码</button>
              <button class="table-btn">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 编辑用户弹窗线框 -->
    <div style="position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);display:flex;align-items:center;justify-content:center;z-index:1000;">
      <div style="background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(80,60,180,0.10);width:420px;padding:32px 28px 24px 28px;position:relative;">
        <div style="font-size:1.2rem;font-weight:bold;margin-bottom:18px;">编辑用户</div>
        <form>
          <div style="margin-bottom:16px;">
            <label style="display:block;color:#888;font-size:1rem;margin-bottom:4px;">* 用户名</label>
            <input type="text" value="hehehe" style="width:100%;padding:8px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:1rem;background:#f6f7fb;" />

    <!-- 用户详情弹窗线框 -->
    <div style="position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);display:flex;align-items:center;justify-content:center;z-index:1002;">
      <div style="background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(80,60,180,0.10);width:640px;padding:0 0 24px 0;position:relative;">
        <div style="padding:32px 32px 0 32px;border-radius:12px 12px 0 0;background:linear-gradient(90deg,#e0f7fa 0%,#e8f5e9 100%);display:flex;align-items:center;gap:24px;">
          <div style="width:72px;height:72px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#6a9cfb;font-weight:bold;">H</div>
          <div style="flex:1;">
            <div style="font-size:1.3rem;font-weight:bold;">hehehe</div>
            <div style="color:#888;font-size:1.05rem;">hest@xample.com</div>
          </div>
          <button style="background:#6a9cfb;color:#fff;border:none;border-radius:6px;padding:8px 18px;font-size:1rem;font-weight:bold;cursor:pointer;">编辑资料</button>
        </div>
        <div style="padding:24px 32px 0 32px;">
          <div style="font-size:1.1rem;font-weight:bold;margin-bottom:12px;margin-top:8px;">基本信息</div>
          <div style="background:#f6f7fb;border-radius:8px;padding:16px 12px;margin-bottom:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;font-size:1rem;">
            <div><b>用户ID</b><br>844f922f-47ed-42ca-9345-3c5230bb5f71</div>
            <div><b>用户名</b><br>hehehe</div>
            <div><b>邮箱</b><br>hest@xample.com</div>
            <div><b>状态</b><br><span style="color:#3ecf8e;background:#e6f9e6;padding:2px 10px;border-radius:6px;font-size:0.98rem;">启用</span></div>
            <div><b>注册时间</b><br>2025-07-30 11:04:03</div>
            <div><b>登录次数</b><br>1</div>
          </div>
          <div style="font-size:1.1rem;font-weight:bold;margin-bottom:12px;">登录统计</div>
          <div style="display:flex;gap:18px;margin-bottom:18px;">
            <div style="flex:1;background:#f6f7fb;border-radius:8px;padding:18px 0;text-align:center;">
              <div style="font-size:2rem;font-weight:bold;color:#6a9cfb;">1</div>
              <div style="color:#888;font-size:1rem;">总登录次数</div>
            </div>
            <div style="flex:1;background:#f6f7fb;border-radius:8px;padding:18px 0;text-align:center;">
              <div style="font-size:2rem;font-weight:bold;color:#6a9cfb;">1</div>
              <div style="color:#888;font-size:1rem;">活跃天数</div>
            </div>
            <div style="flex:1;background:#f6f7fb;border-radius:8px;padding:18px 0;text-align:center;">
              <div style="font-size:2rem;font-weight:bold;color:#6a9cfb;">3小时前</div>
              <div style="color:#888;font-size:1rem;">最后活跃</div>
            </div>
          </div>
          <div style="background:#f6f7fb;border-radius:8px;padding:16px 12px;margin-bottom:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;font-size:1rem;">
            <div><b>最后登录时间</b><br>2025-07-30 11:04:11</div>
            <div><b>最后登录IP</b><br>-</div>
            <div><b>注册IP</b><br>-</div>
            <div><b>设备信息</b><br>-</div>
          </div>
        </div>
        <div style="display:flex;justify-content:flex-end;gap:16px;padding:0 32px;">
          <button type="button" style="background:#f6f7fb;color:#888;border:none;border-radius:6px;padding:8px 18px;font-size:1rem;cursor:pointer;">关闭</button>
          <button type="button" style="background:#6a9cfb;color:#fff;border:none;border-radius:6px;padding:8px 18px;font-size:1rem;font-weight:bold;cursor:pointer;">编辑用户</button>
        </div>
        <button style="position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.2rem;color:#888;cursor:pointer;">×</button>
      </div>
    </div>
          </div>
          <div style="margin-bottom:16px;">
            <label style="display:block;color:#888;font-size:1rem;margin-bottom:4px;">昵称</label>
            <input type="text" placeholder="请输入昵称" style="width:100%;padding:8px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:1rem;background:#f6f7fb;" />
          </div>
          <div style="margin-bottom:16px;">
            <label style="display:block;color:#888;font-size:1rem;margin-bottom:4px;">* 邮箱</label>
            <input type="email" value="hest@xample.com" style="width:100%;padding:8px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:1rem;background:#f6f7fb;" />
          </div>
          <div style="margin-bottom:24px;display:flex;align-items:center;gap:12px;">
            <label style="color:#888;font-size:1rem;">* 状态</label>
            <span style="color:#f56c6c;">禁用</span>
            <label style="position:relative;display:inline-block;width:40px;height:22px;">
              <input type="checkbox" checked style="opacity:0;width:0;height:0;" />
              <span style="position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#e0e0e0;border-radius:22px;transition:.4s;"></span>
              <span style="position:absolute;left:20px;top:2px;width:18px;height:18px;background:#6a9cfb;border-radius:50%;transition:.4s;"></span>
            </label>
            <span style="color:#3ecf8e;">启用</span>
          </div>
          <div style="display:flex;justify-content:flex-end;gap:16px;">
            <button type="button" style="background:#f6f7fb;color:#888;border:none;border-radius:6px;padding:8px 18px;font-size:1rem;cursor:pointer;">取消</button>
            <button type="submit" style="background:#6a9cfb;color:#fff;border:none;border-radius:6px;padding:8px 18px;font-size:1rem;font-weight:bold;cursor:pointer;">确定</button>
          </div>
        </form>
        <button style="position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.2rem;color:#888;cursor:pointer;">×</button>
      </div>
    </div>

    <!-- 角色分配弹窗线框 -->
    <div style="position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);display:flex;align-items:center;justify-content:center;z-index:1001;">
      <div style="background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(80,60,180,0.10);width:480px;padding:32px 28px 24px 28px;position:relative;">
        <div style="font-size:1.2rem;font-weight:bold;margin-bottom:18px;">角色分配</div>
        <div style="display:flex;align-items:center;gap:16px;margin-bottom:18px;background:#f6f7fb;padding:16px 12px;border-radius:8px;">
          <div style="width:48px;height:48px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#6a9cfb;font-weight:bold;">H</div>
          <div>
            <div style="font-size:1.1rem;font-weight:bold;">hehehe</div>
            <div style="color:#888;font-size:0.98rem;">hest@xample.com</div>
          </div>
        </div>
        <div style="margin-bottom:12px;font-size:1.05rem;font-weight:bold;color:#6a9cfb;">角色配置</div>
        <div style="margin-bottom:8px;color:#888;font-size:0.98rem;">当前角色</div>
        <div style="margin-bottom:16px;">
          <span style="display:inline-block;background:#f3f0fa;color:#6a9cfb;border-radius:6px;padding:4px 12px;font-size:0.98rem;margin-right:8px;">普通用户 ×</span>
        </div>
        <div style="margin-bottom:8px;color:#888;font-size:0.98rem;">可分配角色</div>
        <div style="max-height:160px;overflow-y:auto;">
          <div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;background:#f6f7fb;padding:12px 10px;border-radius:8px;">
            <div style="width:36px;height:36px;border-radius:50%;background:#a084ee;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;font-weight:bold;">A</div>
            <div>
              <div style="font-weight:bold;">数据分析师</div>
              <div style="color:#888;font-size:0.96rem;">数据分析师，专注数据分析相关功能</div>
            </div>
          </div>
          <div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;background:#f6f7fb;padding:12px 10px;border-radius:8px;">
            <div style="width:36px;height:36px;border-radius:50%;background:#3ecf8e;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;font-weight:bold;">超</div>
            <div>
              <div style="font-weight:bold;">超级管理员</div>
              <div style="color:#888;font-size:0.96rem;">系统超级管理员，拥有所有权限</div>
            </div>
          </div>
          <div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;background:#f6f7fb;padding:12px 10px;border-radius:8px;">
            <div style="width:36px;height:36px;border-radius:50%;background:#6a9cfb;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;font-weight:bold;">系</div>
            <div>
              <div style="font-weight:bold;">系统管理员</div>
              <div style="color:#888;font-size:0.96rem;">系统管理员，拥有部分管理权限</div>
            </div>
          </div>
        </div>
        <div style="display:flex;justify-content:flex-end;gap:16px;margin-top:18px;">
          <button type="button" style="background:#f6f7fb;color:#888;border:none;border-radius:6px;padding:8px 18px;font-size:1rem;cursor:pointer;">取消</button>
          <button type="submit" style="background:#6a9cfb;color:#fff;border:none;border-radius:6px;padding:8px 18px;font-size:1rem;font-weight:bold;cursor:pointer;">确定</button>
        </div>
        <button style="position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.2rem;color:#888;cursor:pointer;">×</button>
      </div>
    </div>
  </div>
</body>
</html>
